<template>
  <div class="main">
    <!-- 抬头 -->
    <van-nav-bar
      fixed
      title="黑马优购"
      left-text="返回"
      left-arrow
      style="color: #fff"
      @click-left="onClickLeft"
    ></van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" fixed>
      <van-swipe-item v-for="(image, index) in list.pics" :key="index">
        <img class="swipe" v-lazy="image.pics_mid" @click="Image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 价格 描述 运费 收藏 -->
    <div slot="list" class="slot">
      <div class="price">￥{{list.goods_price}}</div>
      <van-row type="flex" justify="space-between" class="middle">
        <van-col span="20" class="name">{{list.goods_name}}</van-col>
        <van-col span="4" class="icon">
          <div>
            <van-icon :name="flag?'star-o':'star'" color="red" @click="changeicon" />
          </div>
          <div>收藏</div>
        </van-col>
      </van-row>
      <van-row class="free">快递:免运费</van-row>
    </div>
    <!-- 加入购物车 -->
    <div class="actionbox">
      <div class="lasttime">促销:满300减30元</div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="getpople" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :info="getAllNum"
          @click="getcarlist(list)"
        />
        <van-goods-action-button type="warning" text="加入购物车" @click="addcarlist(list)" />
      </van-goods-action>
      <!-- 送货地址 -->
      <van-row>
      <van-col :span="5" class="colstyle">
        <b>送至:</b>
      </van-col>
      <van-col :span="18" class="colstyle">
        <i v-if="detailsList == null" @click="addAddress">请选择地址</i>
        <i v-else-if="detailsList.length == 0" @click="addAddress">请选择地址</i>
        <i
          class="addressText"
          @click="editAddress"
          v-else
        >{{address[1]}} {{address[2]}} {{address[3]}}</i>
      </van-col>
      <van-col :span="1" class="colstyle">
        <b class="textIcon">></b>
      </van-col>
    </van-row>
    </div>
    <!-- 图片详情和规格参数 -->
    <van-tabs v-model="activeName" swipeable>
      <van-tab title="图片详情" name="Picturedetails" class="Picture" v-html="list.goods_introduce"></van-tab>
      <van-tab title="规格参数" name="specifications">
        <table class="gridtable">
          <tr v-for="(item, i) in list.attrs" :key="i">
            <td>{{item.attr_name}}</td>
            <td>{{item.attr_vals}}</td>
          </tr>
        </table>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import Vue from "vue";
import { ImagePreview } from "vant";
Vue.use(ImagePreview);
import { Lazyload } from "vant";
Vue.use(Lazyload);
export default {
  data() {
    return {
      // 获取到的商品详情的信息
      list: {},
      // 点击的次数
      number: 0,
      //  预览图片的数组
      images: [],
      activeName: "Picturedetails",
      flag: true,
      address: [],
      detailsList: []
    };
  },
  methods: {
    // 获取详情的数据
    async gitdetails() {
      const { data: res } = await this.$http.get("/goods/detail", {
        params: {
          goods_id: this.goods_id
        }
      });
      if (res.meta.status === 200) {
        this.list = res.message;
      } else {
        this.$notify({ type: "danger", message: "获取失败" });
      }
    },
    // 点击客服
    getpople() {
      this.$router.push("/getpople");
    },
    // 点击购物车
    getcarlist(list) {
      this.$router.push("/cars");
    },
    // 加入购物车
    addcarlist(list) {
      this.number++;
      list.number = this.number;
      list.is_promote = true;
      this.$store.commit("getlist1", list);
    },
    Image() {
      this.images = [];
      this.list.pics.forEach(element => {
        this.images.push(element.pics_big);
      });
      ImagePreview({
        images: this.images,
        startPosition: 1,
        onClose() {
          // do something
        }
      });
    },
 
    onClickLeft() {
      this.$router.go(-1);
    },
    changeicon() {
      this.flag = !this.flag;
    },
    addAddress() {
      this.$router.push('/addresslist')
    },
    editAddress() {
      this.$router.push('/addresslist')
      sessionStorage.setItem('details', true)
    }
  },
  created() {
    this.gitdetails();
    this.$store.commit("setIfShow", false);
    const defaultAddress = JSON.parse(localStorage.getItem('list'))
    this.detailsList = defaultAddress
    if(!localStorage.getItem('list')) {
      return
    } else if(this.detailsList.length === 0) {
      return 
    } else {
      this.address = defaultAddress.filter(
        item => item.isDefault === true
      )[0].address
    }
  },
  computed: {
    ...mapState(["goods_id"]),
    ...mapGetters(["getAllNum"])
  }
};
</script>

<style lang="less" scoped>
.van-swipe {
  margin-bottom: 15px;
  margin-top: 50px;
}
  .colstyle{
    padding: 5px 0;
   margin: 5px 0;
      background-color: #fff
    }
.swipe {
  width: 100%;
  overflow: hidden;
}
// 
 
.price {
  color: red;
  font-size: 25px;
  margin-bottom: 10px;
}

.name {
  padding: 0 5px;
  border-right: 1px solid #ccc;
  font-size: 15px;
}
.icon {
  font-size: 15px;
  div {
    margin: 5px 0;
    text-align: center;
  }
}
.middle {
  margin: 25px 5px;
}
.free {
  margin: 0 5px 15px;
  font-size: 18px;
  font-weight: 700;
}
.van-goods-action {
  z-index: 9999;
}
.addressText{
  font-style: normal;

}
.lasttime {
  width: 100%;
  font-size: 15px;
  padding: 3px 5px;
  background-color: #fff;
}
.actionbox {
  padding: 7.5px 0;
  background-color: #efefef;
}
.van-cell {
  margin-top: 2px;
}
.van-tabs {
  margin-bottom: 70px;
}
.gridtable {
  margin: 10px;
  width: 95%;
  height: 70px;
  line-height: 70px;
  text-align: center;
  font-family: verdana, arial, sans-serif;
  font-size: 16px;
  color: #333333;
  border-width: 1px;
  border-color: #f0f0f0;
  border-collapse: collapse;
  td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #f0f0f0;
    background-color: #ffffff;
  }
}
</style>